<template>
  <div class="contain">
    <NavBar title="项目列表"></NavBar>
    <div class="box">
      <div class="label">预约项目</div>
      <van-checkbox-group v-model="bxResult">
        <div class="card margin" v-for="(item, index) in proData" :key="index">
          <img :src="item.proImg" alt="" />
          <div class="pro flex-row">
            <div class="pre">
              <p class="pre-sub text-ellipsis-2">
                {{ item.proDesc }}
              </p>
            </div>
            <!-- <van-checkbox :name="index + 'a'" disabled></van-checkbox> -->
          </div>
          <van-divider />
          <div class="flex-row timebox">
            <div class="proName">
              <p class="pre-t">{{ item.proName }}</p>
            </div>
            <div class="time">
              项目时间：<i>{{ item.durationNum }}分钟</i>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-datetime-picker
        type="time"
        title="选择时间"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <div class="button flex-row">
      <div class="btn" @click="goBack()">返回</div>
      <div class="btn" @click="goYuyue()">申请预约</div>
    </div>
  </div>
</template>
<script>
import { getYyPro } from "@/api/user";
import NavBar from "@/components/NavBar.vue";
export default {
  data() {
    return {
      temp: {},
      result: [],
      bxResult: ["1a", "0a"],
      mustData: [],
      proData: [],
      showPicker: false,
    };
  },
  components: {
    NavBar,
  },
  computed: {},
  mounted() {
    this.initData();
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    goYuyue() {
      this.$router.push({ name: "TimeChangeView", params: { id: "123" } });
    },
    initData() {
      var reqData = {};
      getYyPro(reqData).then((res) => {
        if (res.data.state === 0) {
          this.proData = res.data.data;
        }
      });
    },
    isShow(e) {
      this.type = e;
      this.showPicker = true;
    },
    getTime(e) {
      this.$router.push({ name: "TimeChangeView", params: { id: e.proId } });
    },
    config() {
      var temp = this.temp;
      if (
        !(
          temp.starTime &&
          temp.endTime &&
          temp.peopleNum &&
          temp.tel &&
          temp.peopleName &&
          temp.danweiName &&
          temp.notes
        )
      ) {
        this.$router.push("/state");
      } else {
        this.$toast({
          message: "请补充信息",
        });
      }
    },
    onConfirm(time) {
      if (this.type === "star") {
        this.temp.starTime = time;
      } else if (this.type === "end") {
        this.temp.endTime = time;
      }
      this.showPicker = false;
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.timebox {
  // justify-content: flex-end;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.handle-time-box {
  padding: 3px 15px;
  border-radius: 15px;
  margin: 5px;
  box-sizing: border-box;
  background-color: #0d6efd;
  color: white;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
}
/deep/.van-divider {
  margin: 3px;
}
.contain {
  padding: 0 0 100px 0;
}
.box {
  padding: 0 16px;
  box-sizing: border-box;
}
.label {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  color: #333333;
  line-height: 26px;
  margin: 15px 0;
  align-items: center;
}
.label::before {
  content: ""; /* 必须的属性，确保伪元素渲染 */
  display: block;
  width: 3px;
  height: 12px;
  margin-right: 5px;
  background-color: #0d6efd;
  border-radius: 8px;
}
.card {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 9px;
}

.proName {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #0d6efd;
  font-weight: 600;
}
input {
  width: 100%;
  text-align: right;
  padding: 16px;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 15px;
  color: #112950;
  border: none;
  outline: none;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  width: 100%;
}
input::placeholder {
  font-weight: 400;
  text-align: right;
  font-size: 15px;
  color: #b2bac6;
  line-height: 22px;
}
.cell {
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  .l-t {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 23px;
    display: inline-block;
    width: 30%;
  }
  .sub-t {
    font-weight: 400;
    font-size: 15px;
    color: #c3c3c3;
    line-height: 22px;
    align-items: center;
  }
  .have {
    font-weight: 400;
    font-size: 15px;
    color: #333333;
    line-height: 22px;
  }
}
.bordr-btm {
  border-bottom: 1px solid #eaeaea;
}
//项目u部分
img {
  width: 100%;
  height: 70px;
  border-radius: 15px;
  overflow: hidden;
}
.pro {
  width: 100%;
  padding: 10px 0;
  justify-content: space-between;

  .pre {
    width: 100%;
    display: flex;
    flex-direction: column;
    .pre-t {
      font-weight: 600;
      font-size: 16px;
      color: #3a3a3a;
      line-height: 25px;
    }
    .pre-sub {
      font-weight: 500;
      font-size: 12px;
      color: #999999;
      line-height: 18px;
    }
  }
}
.margin {
  margin-top: 10px;
}
.padding-none {
  padding: 0 !important;
}
.time {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  color: #3a3a3a;
  line-height: 25px;
  i {
    color: #0d6efd;
    font-weight: 600;
  }
}
.button {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  z-index: 0;
  backdrop-filter: blur(3px);
  position: fixed;
  gap: 20px;
  cursor: pointer; /* 添加一个指针样式以表明这是可点击的 */
  div {
    width: 327px;

    height: 54px;
    background: #0065ff;
    border-radius: 12px 12px 12px 12px;
    font-weight: 600;
    font-size: 17px;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
    line-height: 54px;
  }
}
</style>
